<template>
  <div class="contain bgColor">
      <div class="img1"></div>
      <div class="listbox">
        <div class="leftbox">
          <li :class="['leftmargin',{big:item.code==1, small:item.code!=1}]" v-for="(item,index) in leftlist" :key="index" @click="goToCourse(item.code)">
            <img class="itemImg" :src="item.cover">
          </li>
        </div>
        <div class="rightbox">
          <li class="small rightmargin" v-for="(item,index) in rightlist" :key="index" @click="goToCourse(item.code)">
            <img class="itemImg" :src="item.cover">
          </li>
        </div>
      </div>
      <div class="img2 imgMargin"></div>
      <div class="img3 imgMargin"></div>
      <div class="img4 imgMargin"></div>
      <div class="img5"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftlist: [{
        code:"1",
        cover:require("@/assets/img/mathematical-games.png"),
      },{
         code:"2",
         cover:require("@/assets/img/art-by-hand.png"),
      }],
      rightlist: [{
        code:"3",
        cover:require("@/assets/img/science-experiment.png"),
      },{
         code:"4",
         cover:require("@/assets/img/music.png"),
      },{
         code:"5",
         cover:require("@/assets/img/read-story.png"),
      }],
    };
  },
  methods: {
    goToCourse(type) {
      this.$router.push({
        path: "/course",
        query: {
          type: type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .img1 {
    background: url("~@/assets/img/mini-head.png") no-repeat;
    width: 100%;
    height: 7.8rem;
    position: absolute;
    background-size: cover;
    display: block;
  }
  .listbox {
    background-color: white;
    margin: 7.7rem 0.31rem 0rem 0.32rem;
    border-radius: 0rem 0rem 0.38rem 0.38rem;
    box-shadow: 0rem 0.15rem 0rem 0rem #fec320;
    display: flex;
    .leftbox {
      width: 50%;
      float: left;
    }
    .rightbox {
      width: 50%;
      float: right;
    }
    .big {
      width: 2.86rem;
      height: 3.4rem;
      border-radius: 0.3rem;
    }
    .small {
      width: 2.86rem;
      height: 1.6rem;
      border-radius: 0.3rem;
    }
    .itemImg {
      width: 100%;
      height: 100%;
    }
    .leftmargin {
      margin: 0.21rem 0.1rem 0.21rem 0.47rem;
    }
    .rightmargin {
      margin: 0.21rem 0.47rem 0.21rem 0.1rem;
    }
  }
  .img2 {
    background: url("~@/assets/img/parent-child-class.png") no-repeat;
    width: 6.86rem;
    height: 5.65rem;  
    background-size: cover;
    display: block;
  }
  .img3 {
    background: url("~@/assets/img/mini-course.png") no-repeat;
    width: 6.86rem;
    height: 9.55rem;  
    background-size: cover;
    display: block;
  }
  .img4 {
    background: url("~@/assets/img/multiple-courses.png") no-repeat;
    width: 6.86rem;
    height: 9.15rem;  
    background-size: cover;
    display: block;
  }
  .img5 {
    background: url("~@/assets/img/parents-home.png") no-repeat;
    width: 6.86rem;
    height: 5.15rem;  
    background-size: cover;
    display: block;
    margin: 0.4rem 0.32rem 1.31rem 0.32rem;
  }
  .imgMargin {
    margin: 0.4rem 0.32rem 0rem 0.32rem;
  }
}
.bgColor {
  width: 100%;
  height: 100%;
  background-color: #fed300;
}
</style>